<template>
  <div id="app">

    <printDialog :dialog-visible="dialogVisible"
                 @cancel="handlePrintDialogCancel"
                 @select-print="printSelectAfter" />
    <pinter ref="print"
            :html-data="HtmlData"
            @complete="doAttendanceHandle"></pinter>
    <attendance :dialog-visible="attenDialogVisible"
                :card-number="dataForm.cardNumber"
                @cancel="handleAttenDialogCancel"></attendance>
    <el-row :gutter="20"
            style="margin: 50px 0">
      <el-col :span="14"
              style="text-align: center">
        <el-input placeholder="请输入会员卡号"
                  v-model="dataForm.cardNumber"
                  clearable
                  @clear="clearHandle"
                  @keyup.enter.native="cardClickHandle"
                  size="max"
                  style="font-size: 18px; font-weight: bold"
                  v-fo>
          <el-button slot="append"
                     icon="el-icon-search"
                     type="primary"
                     @click="cardClickHandle">查询会员信息</el-button>
        </el-input>
      </el-col>
      <el-col :span="10">
        <el-button type="primary"
                   @click="queryAttenHandle"
                   size="max">入场记录</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <table class="member">
          <tr>
            <td>姓名</td>
            <td>{{dataForm.name || '-'}}</td>
          </tr>
          <tr>
            <td>联系电话</td>
            <td>{{dataForm.telphone || '-'}}</td>
          </tr>
          <tr>
            <td>身份证号</td>
            <td>{{dataForm.idcard || '-'}}</td>

          </tr>
          <tr>
            <td>会员卡类型</td>
            <td>{{dataForm.cardTypeName || '-'}}</td>
          </tr>
          <tr>
            <td>可用次数</td>
            <td>{{dataForm.usage || '-'}}</td>

          </tr>
          <tr>
            <td>座位号码</td>
            <td>{{dataForm.seat || '-'}}</td>
          </tr>
        </table>
      </el-col>
      <!--<el-col :span="12">
         <table class="drama">
          <thead>
            <tr>
              <th>戏曲名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in dramaList"
                :key="item.id">
              <td>{{item.name}}</td>
              <td>{{item.viewDate | formatDate('yyyy-MM-dd hh:mm:ss')}}</td>
              <td>
                <el-button type="primary"
                           size="max"
                           @click="doPrint(item)">打印</el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </el-col>-->
    </el-row>
    <el-button type="primary"
               @click="showPrint"
               size="mini"
               style="margin: 20px auto;">设置打印机</el-button>
  </div>
</template>
<script>
import { formatDate } from '@/utils/date'
// import { ipcRenderer } from 'electron'
import printDialog from './components/PrintDialog.vue'
import Pinter from './components/pinter.vue'
import attendance from './components/attendance.vue'

export default {
  name: 'App',
  components: {
    Pinter,
    printDialog,
    attendance
  },
  data() {
    return {
      dialogVisible: false,
      attenDialogVisible: false,
      printVisible: true,
      HtmlData: '',
      dramaId: '',
      printList: [],
      dramaList: [],
      dataForm: {
        id: '',
        memberId: '',
        cardNumber: '',
        name: '',
        telphone: '',
        idcard: '',
        cardTypeId: '',
        cardTypeName: '',
        usage: '',
        seat: ''
      }
    }
  },
  filters: {
    formatDate(time, format = 'yyyy-MM-dd') {
      var date = new Date(time * 1000)
      return formatDate(date, format)
    }
  },
  mounted() {
  },
  methods: {
    showPrint() {
      this.dialogVisible = true
    },
    handlePrintDialogCancel() {
      this.dialogVisible = false
    },
    handleAttenDialogCancel() {
      this.attenDialogVisible = false
    },
    printSelectAfter(val) {
      console.log(`设置打印机:${this.dialogVisible}`)
      this.dialogVisible = false
      this.$electronStore.set('printForm', val.name)
      // this.printDeviceName = val.name
      // this.printRender()
    },
    // 开始打印
    async doPrint(row = '') {
      const params = {
        cardId: this.dataForm.id,
        cardTypeId: this.dataForm.cardTypeId,
        dramaId: row.id
      }
      this.dramaId = row.id
      const { data: data } = await this.$http.post('/member/attendance/allow', params)
      if (data.code === 0) {
        this.HtmlData = this.dataForm.name
        // 座位号
        row.seat = data.data
        this.dataForm.seat = data.data
        // console.log(row)
        this.$refs.print.print(row)
      } else {
        this.$alert(data.msg, '温馨提示', {
          confirmButtonText: '确定'
        })
      }
    },
    // 小票打印成功后记录入场记录
    async doAttendanceHandle() {
      // 入场记录
      const params = {
        'cardId': this.dataForm.id,
        'cardNumber': this.dataForm.cardNumber,
        'cardTypeId': this.dataForm.cardTypeId,
        'cardTypeName': this.dataForm.cardTypeName,
        'memberId': this.dataForm.memberId,
        'memberName': this.dataForm.name,
        'createdBy': this.dataForm.name
        // 'seat': this.dataForm.seat,
        // 'dramaId': this.dramaId
      }
      // 异步请求保存入场记录
      const { data: data } = await this.$http.post('/member/attendance/save', params)
      // 请求处理成功
      if (data.code === 0) {
        this.$message('打卡成功')

        // 三秒钟后重置表单数据
        setTimeout(this.resetFieldsVal, 3000)
      }
    },
    queryAttenHandle() {
      this.attenDialogVisible = true
    },
    // 会员卡查询按钮点击事件
    cardClickHandle() {
      this.getMemberByCard()
    },
    // 按会员卡号查询会员数据
    async getMemberByCard() {
      if (!this.dataForm.cardNumber) {
        return !1
      }
      const { data: data } = await this.$http.get(`/member/card/cardnumber/${this.dataForm.cardNumber}`)
      if (data.code === 0) {
        const idcard = data.data.idcard
        this.dataForm.id = data.data.id
        this.dataForm.memberId = data.data.memberId
        this.dataForm.name = data.data.name
        this.dataForm.telphone = data.data.telphone
        this.dataForm.idcard = idcard ? idcard.substr(0, idcard.length - 4) + '****' : ''
        this.dataForm.cardTypeId = data.data.cardTypeId
        this.dataForm.cardTypeName = data.data.cardTypeName
        this.dataForm.usage = data.data.usage
        this.dataForm.seat = data.data.seat

        this.printVisible = false

        // 提醒确定打卡弹窗
        this.$confirm('确定打卡吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定
          this.doAttendanceHandle()
        }).catch(() => {
          // 取消
        })

        // this.getDramaList()
      }
    },
    // 获取戏剧数据
    async getDramaList() {
      const { data: data } = await this.$http.get(`/member/drama/list`, { params: { status: 1 }})
      if (data.code === 0) {
        this.dramaList = data.page.list
        console.log(this.dramaList)
      }
    },
    // 清除会员卡号输入框
    clearHandle() {
      for (var item in this.dataForm) {
        this.dataForm[item] = ''
        this.printVisible = false
      }
    },
    // 重置表单数据
    resetFieldsVal() {
      this.dataForm.cardNumber = ''
      this.dataForm.id = ''
      this.dataForm.memberId = ''
      this.dataForm.name = ''
      this.dataForm.telphone = ''
      this.dataForm.idcard = ''
      this.dataForm.cardTypeId = ''
      this.dataForm.cardTypeName = ''
      this.dataForm.usage = ''
      this.dataForm.seat = ''

      this.dramaId = ''
      this.dramaList = []
    }
  },
  created() {
  }
}
</script>

<style scoped>
#app {
  /* font-family: 'Avenir', Helvetica, Arial, sans-serif; */
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  /* text-align: center; */
  color: #2c3e50;
  /* margin-top: 60px; */
  margin: 20px 20px;
  min-width: 720px;
}

.el-table-column {
  line-height: 40px;
}

table.member,
table.drama {
  width: 100%;
  border-top: 1px solid #e5e9f2;
  border-left: 1px solid #e5e9f2;
  border-spacing: 0; /*去掉单元格间隙*/
  font-weight: bold;
  font-size: 19px;
}

table.member td,
table.drama td,
table.drama th {
  line-height: 40px;
  padding: 10px 15px;
  border-bottom: 1px solid #e5e9f2;
  border-right: 1px solid #e5e9f2;
}

table.member td:nth-child(1),
table.member td:nth-child(3) {
  text-align: right;
  width: 18%;
  min-width: 110px;
  padding: 10px 10px;
  background: #f9fafc;
}
table.member td:nth-child(2),
table.member td:nth-child(4) {
  text-align: left;
  letter-spacing: 0.1em;
}
</style>
